if (!grapes) var grapes = {};

grapes["154"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-154">
  <div class="news-title"></div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// title
thisObj.find('.news-title').css({
  "padding-top": rem(param["padding-top"]),
  "padding-bottom": rem(param["padding-bottom"]),
  "padding-left": rem(param["padding-left"]),
  "padding-right": rem(param["padding-right"]),
  "font-size": rem(param["font-size"]),
  "color": param["color"],
  "line-height": param["line-height"]
});

thisObj.find('.news-title').html(data['title']);

return thisObj;
  }
}

grapes["155"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-155">
  <div class="news-content"></div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// content
thisObj.find('.news-content').css({
  "padding-top": rem(param["padding-top"]),
  "padding-bottom": rem(param["padding-bottom"]),
  "padding-left": rem(param["padding-left"]),
  "padding-right": rem(param["padding-right"]),
  "font-size": rem(param["font-size"]),
  "line-height": param["line-height"],
  "color": param["color"]
});

var jContent = 'j-m155-' + (+ new Date());
thisObj.find('.news-content').addClass(jContent);
thisObj.prepend('<style>.'+jContent+' p{margin-bottom:'+rem(param["font-size"] * param["section-margin-bottom"])+';}</style>');

thisObj.find('.news-content').html(data['content']);

return thisObj;
  }
}

grapes["157"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-157">
  <div class="news-sub">
    <div class="news-subspan"></div>
    <div class="news-subspan"></div>
    <div class="news-subspan"></div>
    <div class="news-subspanright"></div>
    <div class="news-subspanright"></div>
    <div class="news-subspanright"></div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// contain
thisObj.find('.news-sub').css({
  "padding-top": rem(param["padding-top"]),
  "padding-bottom": rem(param["padding-bottom"]),
  "padding-left": rem(param["padding-left"]),
  "padding-right": rem(param["padding-right"])
});

thisObj.find('.news-sub .news-subspan').css({
  "margin-right": rem(param["leftMargin"]),
  "font-size": rem(param["leftFontsize"]),
  "color": param["leftColor"],
  "line-height": param["leftLineheight"]
});

thisObj.find('.news-sub .news-subspanright').css({
  "margin-left": rem(param["rightMargin"]),
  "font-size": rem(param["rightFontsize"]),
  "color": param["rightColor"],
  "line-height": param["rightLineheight"]
});

thisObj.find('.news-subspan').each(function(index){
  $(this).html(data['sub'+(index+1)]);
});
thisObj.find('.news-subspanright').each(function(index){
  $(this).html(data['subright'+(index+1)]);
});

return thisObj;
  }
}

grapes["156"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-156">
  <div class="news-content-show"></div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// content
thisObj.find('.news-content-show').css({
  "padding-top": rem(param["padding-top"]),
  "padding-bottom": rem(param["padding-bottom"]),
  "padding-left": rem(param["padding-left"]),
  "padding-right": rem(param["padding-right"]),
  "font-size": rem(param["font-size"]),
  "line-height": param["line-height"],
  "color": param["color"],
  "background": param["background"]
});

thisObj.find('.news-content-show').html(data['content']);

return thisObj;
  }
}

grapes["163"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-163">
  <div class="list-title">
    <div class="title-contain">
      <div class="titlewrap">
        <div class="title"></div>
        &nbsp;
      </div>
      <div class="more"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-title').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title-contain').css({
  "border-bottom-width": rem(param["lineHeight"]),
  "border-bottom-color": param["lineColor"]
});
thisObj.find('.titlewrap').css({
  "margin-left": rem(param["titleMargin"]),
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "color": param["titleColor"]
});
thisObj.find('.title').css({
  "border-bottom-width": rem(param["titlelineHeight"]),
  "border-bottom-color": param["titlelineColor"],
  "padding-left": rem(param["titlePadding"]),
  "padding-right": rem(param["titlePadding"])
});

if (param['moreShow'] == 'true') {
  thisObj.find('.more').css({
    "top": rem(param["moreTop"]),
    "right": rem(param["moreRight"]),
    "font-size": rem(param["moreFontsize"]),
    "color": param["moreColor"]
  });
} else {
  thisObj.find('.more').remove();
}

// data
thisObj.find('.title').html(data['title']);
if (param['moreShow'] == 'true') {
  thisObj.find('.more').html(data['more']);
}

return thisObj;
  }
}

grapes["102"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-102">
  <div class="list-item">
    <div class="item-contain">
      <div class="col-left">
        <div class="title"></div>
        <div class="subplace">&nbsp;</div>
        <div class="sub"></div>
      </div>
      <div class="col-right"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.col-left').css({
  "margin-right": rem(param["areaMargin"]),
  "min-height": rem(param["imgHeight"])
});
thisObj.find('.title').css({
  "width": rem(param["titleWidth"]),
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.subplace, .sub').css({
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"]
});
thisObj.find('.sub').css({
  "color": param["subColor"]
});
thisObj.find('.col-right').css({
  "width": rem(param["imgWidth"]),
  "height": rem(param["imgHeight"])
});

// data
thisObj.find('.title').html(data['title']);
$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});
if (data['imgurl']) {
  thisObj.find('.col-right').append('<img src="'+data['imgurl']+'">');
}

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["111"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-111">
  <div class="list-item">
    <div class="item-contain">
      <div class="title"></div>
      <div class="piclist">
        <div class="pic"></div>
        <div class="pic"></div>
        <div class="pic"></div>
      </div>
      <div class="sub"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.piclist').css({
  "margin-top": rem(param["imgMargin"])
});
thisObj.find('.piclist .pic').css({
  "width": rem(param["imgWidth"]),
  "height": rem(param["imgHeight"])
});
thisObj.find('.sub').css({
  "margin-top": rem(param["subMargintop"]),
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"],
  "color": param["subColor"]
});

// data
thisObj.find('.title').html(data['title']);
if (data['imgurl']) {
  if (typeof(data['imgurl']) == 'string') {
    var imgurl = JSON.parse(data['imgurl']);
  } else {
    var imgurl = data['imgurl'];
  }
  thisObj.find('.piclist .pic').each(function(index){
    if (imgurl[index]) {
      $(thisObj.find('.pic')[index]).append('<img src="'+imgurl[index]+'">');
    }
  });
}
$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["103"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-103">
  <div class="list-item">
    <div class="item-contain">
      <div class="title"></div>
      <div class="pic"></div>
      <div class="summary"></div>
      <div class="sub"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.pic').css({
  "margin-top": rem(param["imgMargin"]),
  "height": rem(param["imgHeight"])
});
thisObj.find('.summary').css({
  "margin-top": rem(param["summaryMargin"]),
  "font-size": rem(param["summaryFontsize"]),
  "line-height": param["summaryLineheight"],
  "-webkit-line-clamp": param["summaryLineclamp"],
  "color": param["summaryColor"]
});
thisObj.find('.sub').css({
  "margin-top": rem(param["subMargintop"]),
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"],
  "color": param["subColor"]
});

// data
if (data['title']) {
  thisObj.find('.title').html(data['title']);
}
if (data['imgurl']) {
  thisObj.find('.pic').append('<img src="'+data['imgurl']+'">');
}
if (data['summary']) {
  thisObj.find('.summary').html(data['summary']);
}
$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["149"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-149">
  <div class="comment-item">
    <div class="item-contain">
      <div class="item-head">
        <div class="headpic"></div>
      </div>
      <div class="item-main">
        <div class="headbar">
          <div class="headname"></div>
          <div class="headsub"></div>
          <div class="headrightsub"></div>
        </div>
        <div class="content"></div>
        <div class="sub"></div>
        <div class="item-recontent">
          <div class="recontent"></div>
          <div class="recontent-more">
            <div class="morealign"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.comment-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.item-head').css({
  "margin-right": rem(param["headMargin"])
});
thisObj.find('.item-head .headpic').css({
  "width": rem(param["headSize"]),
  "height": rem(param["headSize"]),
  "border-radius": rem(param["headRadius"])
});

thisObj.find('.headname').css({
  "max-width": rem(param["nickMaxwidth"]),
  "font-size": rem(param["nickFontsize"]),
  "line-height": param["nickLineheight"],
  "color": param["nickColor"]
});

thisObj.find('.headsub').css({
  "margin-left": rem(param["nicksubMargin"]),
  "font-size": rem(param["nicksubFontsize"]),
  "line-height": param["nicksubLineheight"],
  "color": param["nicksubColor"]
});

thisObj.find('.headrightsub').css({
  "font-size": rem(param["nickrightFontsize"]),
  "line-height": param["nickrightLineheight"],
  "color": param["nickrightColor"]
});

thisObj.find('.content').css({
  "margin-top": rem(param["contentMargin"]),
  "font-size": rem(param["contentFontsize"]),
  "line-height": param["contentLineheight"],
  "-webkit-line-clamp": param["contentLineclamp"],
  "color": param["contentColor"]
});

thisObj.find('.sub').css({
  "margin-top": rem(param["subMargintop"]),
  "margin-bottom": rem(param["subMarginbottom"]),
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"],
  "color": param["subColor"]
});

if (param["recontentShow"] == 'true') {
  thisObj.find('.item-recontent').css({
    "padding": rem(param["recontentMargin"]),
    "background": param["recontentBg"]
  });

  thisObj.find('.recontent').css({
    "margin-bottom": rem(param["recontentPartmargin"]),
    "font-size": rem(param["recontentFontsize"]),
    "line-height": param["recontentLineheight"],
    "-webkit-line-clamp": param["recontentLineclamp"],
    "color": param["recontentColor"]
  });

  if (param["recontentmoreAlign"] == 'left') {
    thisObj.find('.recontent-more .morealign').addClass('more-left');
  } else if (param["recontentmoreAlign"] == 'right') {
    thisObj.find('.recontent-more .morealign').addClass('more-right');
  }
  thisObj.find('.recontent-more .morealign').css({
    "font-size": rem(param["recontentmoreFontsize"]),
    "line-height": param["recontentmoreLineheight"],
    "color": param["recontentmoreColor"]
  });
} else {
  thisObj.find('.item-recontent').remove();
}

// data
thisObj.find('.item-head .headpic').html('<img src="'+data['headimg']+'">');
thisObj.find('.headname').html(data['nickname']);
thisObj.find('.headsub').html(data['nicksub']);

$.each([data['headsub1'], data['headsub2']], function(){
  thisObj.find('.headrightsub').append('<div class="sub-right">'+this+'</div>');
});
thisObj.find('.headrightsub .sub-right').css({
  "margin-left": rem(param["nicksubMargin"])
});

thisObj.find('.content').html(data['content']);

$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

if (param["recontentShow"] == 'true') {
  thisObj.find('.recontent').html(data['recontent']);
  thisObj.find('.recontent-more .morealign').html(data['recontentmore']);
}

return thisObj;
  }
}

grapes["146"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-146">
  <div class="detail-video">
    <div class="video-contain">
      <div class="play">
        <div class="playbtn"></div>
      </div>
      <div class="poster"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.detail-video').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.video-contain').css({
  "height": rem(param["height"]),
  "background": param["bgColor"],
  "border-radius": rem(param['radius'])
});
thisObj.find('.playbtn').css({
  "width": rem(param["playWidth"]),
  "height": rem(param["playHeight"]),
  "margin-left": rem(-param["playWidth"]/2),
  "margin-top": rem(-param["playHeight"]/2)
});

thisObj.find('.playbtn').html(data['btn']);
thisObj.find('.playbtn').data('url', data['videoUrl']);
thisObj.find('.poster').data('poster', data['poster']);

return thisObj;
  }
}

grapes["305"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-305">
  <div class="news-contain">
    <div class="news-picture"></div>
    <div class="news-content">
      <div class="news-title"></div>
      <div class="news-sub">
        <div class="news-subspan"></div>
        <div class="news-subspan"></div>
        <div class="news-subspan"></div>
        <div class="news-subspanright"></div>
        <div class="news-subspanright"></div>
        <div class="news-subspanright"></div>
      </div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// contain
thisObj.find('.news-contain, .news-picture').height(rem(param['containHeight']));

thisObj.find('.news-content').css({
  "padding-top": rem(param["contentTop"]),
  "padding-bottom": rem(param["contentBottom"]),
  "padding-left": rem(param["contentLeft"]),
  "padding-right": rem(param["contentRight"])
});

thisObj.find('.news-title').css({
  "font-size": rem(param["titleFontsize"])
});

thisObj.find('.news-sub').css({
  "margin-top": rem(param["subTop"])
});

thisObj.find('.news-sub .news-subspan').css({
  "margin-right": rem(param["subleftMargin"]),
  "font-size": rem(param["subleftFontsize"]),
  "line-height": param["subleftLineheight"]
});

thisObj.find('.news-sub .news-subspanright').css({
  "margin-left": rem(param["subrightMargin"]),
  "font-size": rem(param["subrightFontsize"]),
  "line-height": param["subrightLineheight"]
});

if (data['imgurl']) {
  thisObj.find('.news-picture').html('<img src="'+data['imgurl']+'">');
}

thisObj.find('.news-title').html(data['title']);

thisObj.find('.news-subspan').each(function(index){
  $(this).html(data['sub'+(index+1)]);
});
thisObj.find('.news-subspanright').each(function(index){
  $(this).html(data['subright'+(index+1)]);
});

return thisObj;
  }
}

grapes["127"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-127">
  <div class="list-title">
    <div class="title-contain">
      <div class="icon"></div>
      <div class="title"></div>
      <div class="more"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-title').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title-contain .icon').css({
  "width": rem(param["iconSize"]),
  "height": rem(param["iconSize"]),
  "margin-right": rem(param["iconMargin"]),
  "margin-top": rem((param["titleFontsize"] * param["titleLineheight"] - param["iconSize"]) / 2)
});
thisObj.find('.title-contain .title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "color": param["titleColor"]
});
thisObj.find('.title-contain .more').css({
  "font-size": rem(param["moreFontsize"]),
  "line-height": param["moreLineheight"],
  "color": param["moreColor"]
});

// data
thisObj.find('.title-contain .icon').css({
  "background": 'url('+data['icon']+') no-repeat center center',
  "background-size": "100% auto" 
});
thisObj.find('.title-contain .title').html(data['title']);
thisObj.find('.more').html(data['more']);

return thisObj;
  }
}

grapes["112"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-112">
  <div class="list-item">
    <div class="item-contain">
      <div class="title"></div>
      <div class="summary"></div>
      <div class="sub"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.summary').css({
  "margin-top": rem(param["summaryMargin"]),
  "font-size": rem(param["summaryFontsize"]),
  "line-height": param["summaryLineheight"],
  "-webkit-line-clamp": param["summaryLineclamp"],
  "color": param["summaryColor"]
});
thisObj.find('.sub').css({
  "margin-top": rem(param["subMargintop"]),
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"],
  "color": param["subColor"]
});

// data
if (data['title']) {
  thisObj.find('.title').html(data['title']);
}
if (data['summary']) {
  thisObj.find('.summary').html(data['summary']);
}
$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["113"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-113">
  <div class="list-item">
    <div class="item-contain">
      <div class="pic"></div>
      <span class="tag"></span>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});

thisObj.find('.pic').css({
  "margin-top": rem(param["imgMargin"]),
  "height": rem(param["imgHeight"])
});

thisObj.find('.tag').css({
  "padding-top": rem(param["tagPdtop"]),
  "padding-right": rem(param["tagPdright"]),
  "padding-bottom": rem(param["tagPdbottom"]),
  "padding-left": rem(param["tagPdleft"]),
  "top": rem(param["tagTop"]),
  "right": rem(param["tagRight"]),
  "font-size": rem(param["tagFontsize"]),
  "line-height": param["tagLineheight"],
  "color": param["tagColor"],
  "background-color": param["tagbgColor"]
});

// data

if (data['imgurl']) {
  thisObj.find('.pic').append('<img src="'+data['imgurl']+'">');
}
thisObj.find('.tag').text(data['tag']);



return thisObj;
  }
}

grapes["119"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-119">
  <div class="list-item">
    <div class="item-contain">
      <div class="imgbar"></div>
      <div class="title"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title').css({
  "padding-top": rem(param["titleTop"]),
  "padding-bottom": rem(param["titleBottom"]),
  "padding-left": rem(param["titleLeft"]),
  "padding-right": rem(param["titleRight"]),
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.imgbar').css({
  "background": param["imgBgcolor"]
});
if (param['playbtn'] == 'true') {
  thisObj.find('.imgbar').append('<div class="playbtn"><span></span></div>');
}

// data
if (data['imgurl']) {
  if (param['imgHeight'] == 'auto') {
    thisObj.find('.imgbar').append('<img src="'+data['imgurl']+'" style="width:100%;">');
  } else {
    thisObj.find('.imgbar').height(param['imgHeight']);

    console.log(thisObj.find('.imgbar').width());


    var imgbarWidth = thisObj.find('.imgbar').width(),
      imgbarHeight = thisObj.find('.imgbar').height(),
      newImg = new Image();
    console.log(imgbarWidth);
    console.log(imgbarHeight)
    newImg.src = data['imgurl'];
    if (newImg.complete) {
      if ((imgbarWidth / imgbarHeight) > (newImg.width / newImg.height)) {
        newImg.style.height = imgbarHeight;
      } else {
        var _height = imgbarWidth * newImg.height / newImg.width;
        newImg.style.width = imgbarWidth;
        newImg.style.marginTop = (imgbarHeight - _height) / 2;
      }
      thisObj.find('.imgbar').append(newImg);
    } else {
      newImg.onload = function () {
        if ((imgbarWidth / imgbarHeight) > (newImg.width / newImg.height)) {
          newImg.style.height = imgbarHeight;
        } else {
          var _height = imgbarWidth * newImg.height / newImg.width;
          newImg.style.width = imgbarWidth;
          newImg.style.marginTop = (imgbarHeight - _height) / 2;
        }

        thisObj.find('.imgbar').append(newImg);
      };
      newImg.onerror = function (error) {
        // console.log(error);
      };
    }
  }
}
if (data['title']) {
  thisObj.find('.title').html(data['title']);
}

return thisObj;
  }
}

grapes["164"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-164">
  <div class="list-item">
    <div class="item-contain">
      <div class="title"></div>
      <div class="imgbar"></div>
      <div class="sub"></div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.imgbar').css({
  "margin-top": rem(param["imgMargin"]),
  "width": rem(param["imgWidth"]),
  "height": rem(param["imgHeight"]),
  "background": param["imgBgcolor"]
});
if (param['playbtn'] == 'true') {
  thisObj.find('.imgbar').append('<div class="playbtn"><span></span></div>');
}
thisObj.find('.sub').css({
  "margin-top": rem(param["subMargintop"]),
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"],
  "color": param["subColor"]
});

// data
if (data['title']) {
  thisObj.find('.title').html(data['title']);
}
//图片大小存在问题
if (data['imgurl']) {
  if (param['imgHeight'] == 'auto') {
    thisObj.find('.imgbar').append('<img src="'+data['imgurl']+'" style="width:100%;">');
  } else {

    var imgbarWidth = thisObj.find('.imgbar').width();

    if(imgbarWidth){
      thisObj.find('.imgbar').height(param['imgHeight']);
      var imgbarHeight = thisObj.find('.imgbar').height(),
      newImg = new Image();
      newImg.src = data['imgurl'];
      if (newImg.complete) {
        if ((imgbarWidth / imgbarHeight) > (newImg.width / newImg.height)) {
          newImg.style.height = imgbarHeight;
        } else {
          var _height = imgbarWidth * newImg.height / newImg.width;
          newImg.style.width = imgbarWidth;
          newImg.style.marginTop = (imgbarHeight - _height) / 2;
        }
        thisObj.find('.imgbar').append(newImg);
      } else {
        newImg.onload = function () {
          if ((imgbarWidth / imgbarHeight) > (newImg.width / newImg.height)) {
            newImg.style.height = imgbarHeight;
          } else {
            var _height = imgbarWidth * newImg.height / newImg.width;
            newImg.style.width = imgbarWidth;
            newImg.style.marginTop = (imgbarHeight - _height) / 2;
          }
          thisObj.find('.imgbar').append(newImg);
        };
        newImg.onerror = function (error) {
          // console.log(error);
        };
      }
    }else{//临时写法存在图片拉伸问题
      thisObj.find('.imgbar').append('<img src="'+data['imgurl']+'" style="width:100%">');
    }
  }
}

$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["101"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-101">
  <div class="list-item">
    <div class="item-contain">
      <div class="col-left"></div>
      <div class="col-right">
        <div class="title"></div>
        <div class="subplace">&nbsp;</div>
        <div class="sub"></div>
      </div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});
thisObj.find('.col-left').css({
  "width": rem(param["imgWidth"]),
  "height": rem(param["imgHeight"]),
  "margin-right": rem(param["areaMargin"])
});
thisObj.find('.col-right').css({
  "min-height": rem(param["imgHeight"])
});
thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"]
});
thisObj.find('.subplace, .sub').css({
  "font-size": rem(param["subFontsize"]),
  "line-height": param["subLineheight"]
});
thisObj.find('.sub').css({
  "color": param["subColor"]
});

// data
thisObj.find('.title').html(data['title']);
$.each([data['subleft1'], data['subleft2'], data['subleft3']], function(){
  thisObj.find('.sub').append('<div class="sub-left">'+this+'</div>');
});
$.each([data['subright1'], data['subright2'], data['subright3']], function(){
  thisObj.find('.sub').append('<div class="sub-right">'+this+'</div>');
});
if (data['imgurl']) {
  thisObj.find('.col-left').append('<img src="'+data['imgurl']+'">');
}

thisObj.find('.sub-left').css({
  "margin-right": rem(param["subMargin"])
});
thisObj.find('.sub-right').css({
  "margin-left": rem(param["subMargin"])
});

return thisObj;
  }
}

grapes["115"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-115">
  <div class="list-item">
    <div class="item-contain">
      <div class="swiper-container banner-list j-swiper115">
        <div class="swiper-wrapper j-wrap">
        </div>
      </div>
    </div>
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"]),
});

thisObj.find('.swiper-container').css({
  "height": rem(param['bannerHeight'])
});



// data

if(data['swiperdata']){
  if (Array.isArray(data['swiperdata'])) {
    var swiperdata = data['swiperdata'];
  } else {
    if (typeof(data['swiperdata']) == 'string') {
      var swiperdata = JSON.parse(data['swiperdata']);
    } else {
      var swiperdata = [];
    }
  }

  swiperdata.forEach(function(item){
    var _slideObj = $(`
      <div class="swiper-slide">
        <div class="pic"></div>
        <div class="news-content">
          <div class="news-title"></div>
        </div>
      </div>
    `);
    _slideObj.data('id',item.id);
    _slideObj.find('.pic').append('<img src="'+item.imgUrl+'">');
    _slideObj.find('.news-title').html(item.title);
    thisObj.find('.j-wrap').append(_slideObj);
  });
  thisObj.find('.swiper-slide').css({
    "width": rem(param['slideWidth']),
    "height": rem(param['slideHeight'])
  });

  thisObj.find('.pic').css({
    "height": rem(param['picHeight'])
  });

  thisObj.find('.news-content').css({
    "height": rem(param['shadowHeight'])
  });

  thisObj.find('.news-title').css({
    "line-height": rem(param['titleLineheight']),
    "font-size": rem(param['titleFontsize']),
    "-webkit-line-clamp": param['titleLinenum'],
    "color": param['titleColor']
  });
}

return thisObj;
  }
}

grapes["114"] = class {
  constructor (param) {
    this.template = `
<div class="grapes-114">
  <div class="list-item">
    <div class="title-contain">
      <div class="title"></div>
    </div>
    <div class="content-list">
      <div class="content">
        <span class="list-icon"></span>
        <span class="list-content"></span>
      </div>
      <div class="content">
        <span class="list-icon"></span>
        <span class="list-content"></span></div>
      <div class="content">
        <span class="list-icon"></span>
        <span class="list-content"></span>
      </div>
    </div>

   
  </div>
</div>
`;
    var param_def = {};
    if (param) {
      for (var key in param) {
        param_def[key] = param[key];
      }
    }
    this.param = param_def;
  }
  init (data) {
    var template = this.template,
      param = this.param;
    var thisObj = $(template);
// param
function rem(px) {
  return (Math.round(px / 75 * 1000) / 1000) + 'rem';
}

// param
thisObj.find('.list-item').css({
  "padding-top": rem(param["containTop"]),
  "padding-bottom": rem(param["containBottom"]),
  "padding-left": rem(param["containLeft"]),
  "padding-right": rem(param["containRight"])
});

thisObj.find('.title').css({
  "font-size": rem(param["titleFontsize"]),
  "line-height": param["titleLineheight"],
  "-webkit-line-clamp": param["titleLineclamp"],
  "color": param["titleColor"],
  "font-weight": param["titleWeight"]
});

thisObj.find('.content-list').css({
  "margin-top": rem(param["listTop"]),
  "margin-bottom": rem(param["listBottom"]),
  "margin-left": rem(param["listLeft"]),
  "margin-right": rem(param["listRight"])
});
thisObj.find('.content').css({
  "margin-bottom": rem(param["contentMbottom"])
});

thisObj.find('.list-content').css({
  "margin-left": rem(param['contentLeft']),
  "font-size": rem(param["contentFontsize"]),
  "color": param["contentColor"],
  "font-weight":  param["contentWeight"]
});

thisObj.find('.list-icon').css({
  "top": rem(param['contenticonTop']),
  "left": rem(param["contenticonLeft"]),
  "color": param["contenticonColor"],
  "font-size":  rem(param["contenticonFontsize"]),
  "line-height": param["contenticonLineheight"]
});





// data
thisObj.find('.title').html(data['title']);

if(data['content']){
  if (typeof(data['content']) == 'string') {
    var content = JSON.parse(data['content']);
  } else {
    var content = data['content'];
  }
  thisObj.find('.content-list .content').each(function(index){
    if(content[index]){
      $(thisObj.find('.content-list .content')[index]).find('.list-icon').html(content[index].icon);
      $(thisObj.find('.content-list .content')[index]).find('.list-content').html(content[index].text);
    }
  });
}


return thisObj;
  }
}
